<template>
  <div class="pdf-view">
    <loading v-show="loading" style="z-index: 0" />
    <!-- <div class="view-loading" v-if="!start.pdfBlobUrl">加载中...</div> -->
    <iframe
      v-if="start.pdfBlobUrl"
      style="z-index: 1"
      width="100%"
      height="100%"
      id="iframes"
      :src="'/pdfjs/web/viewer.html?file=' + start.pdfBlobUrl"
    >
    </iframe>
  </div>
</template>

<script setup lang="ts">
import loading from '@/charts/loading.vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import { reactive, onMounted } from 'vue'

const route: any = useRoute()
const start: any = reactive({
  loading: true,
  pdfBlobUrl: '',
  getIframeUrl: () => {
    return '/pdfjs/web/viewer.html'
  }
})
const getPdfUrl = (fileId: string) => {
  axios({
    url: '/prod-api/statistics/ExportReportManagerUrls/downloadPdfFile',
    method: 'post',
    responseType: 'blob',
    params: { fileId }
  }).then((res) => {
    const blob = new Blob([res.data])
    start.pdfBlobUrl = window.URL.createObjectURL(blob) // 创建下载的链接
  })
}

onMounted(() => {
  start.loading = true
  if (route.query && route.query.fileId) {
    getPdfUrl(route.query.fileId)
  }
})
</script>

<style lang="less" scoped>
.pdf-view {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .view-loading {
    font-size: 40px;
    font-weight: bold;
    color: #ef7809;
  }
}
</style>
